<template>
  <div class="menuList">
    <el-tabs type="border-card">
      <el-tab-pane label="用户列表">
        <el-card class="box-card">
          <div slot="header" class="clearfix" style="text-align: left;">
            <div style="float:left">
              <i class="el-icon-s-check"></i>
              <span>审核用户</span>
            </div>
            <el-select
              v-model="value"
              placeholder="请选择"
              style="float:right"
              @change="change(value)"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </div>
          <el-table :data="usersLists" border style="width: 100%">
            <el-table-column fixed prop="user_id" label="用户ID" width="150"></el-table-column>
            <el-table-column label="用户封面" width="82">
              <template slot-scope="scope">
                <el-image :src="scope.row.user_pic" width="60" height="40">
                  <div slot="placeholder" class="image-slot">
                    加载中
                    <span class="dot">...</span>
                  </div>
                </el-image>
              </template>
            </el-table-column>
            <el-table-column prop="user_account" label="用户名" width="120"></el-table-column>
            <el-table-column prop="user_type" label="用户类型" width="120"></el-table-column>
            <el-table-column prop="user_adress" label="用户地址" width="220"></el-table-column>
            <el-table-column prop="uesr_pho" label="用户电话" width="120"></el-table-column>
            <el-table-column prop="user_sex" label="性别" width="120"></el-table-column>
            <el-table-column prop="create_time" label="注册时间" width="120"></el-table-column>
            <el-table-column prop="examine" label="审核情况">
              <template slot-scope="scope">
                <el-button
                  size="small"
                  type="text"
                  :style="scope.row.color"
                  style="font-weight: 700;"
                >{{scope.row.examine}}</el-button>
              </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="300">
              <template slot-scope="scope">
                <el-button
                  v-if="scope.row.admin_id == null"
                  @click="pass(scope.row.user_id)"
                  type="text"
                  size="small"
                >通过审核</el-button>
                <el-button
                  v-if="scope.row.admin_id != null"
                  type="text"
                  size="small"
                  style="color:red"
                >已审核了哦~不能操作了呢</el-button>
                <el-button
                  type="danger"
                  icon="el-icon-delete"
                  @click="delUser(scope.row.user_id)"
                  size="small"
                  plain
                  style="float:right"
                ></el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
export default {
  data() {
    return {
      pusersLists: [],
      npusersLists: [],
      usersLists: [],
      user: {},
      options: [
        {
          value: "0",
          label: "已审核"
        },
        {
          value: "1",
          label: "未审核"
        }
      ],
      value: ""
    };
  },
  mounted() {
    this.user = JSON.parse(this.$cookie.get("userAdmin"));
    this.getUsers();
  },
  methods: {
    //用户列表
    getUsers() {
      var that = this;
      that.$axios
        .get("apis/admin/userlist")
        .then(function(res) {
          if (res.status == 200) {
            if (res.data.status == 1) {
              var peopList = res.data.data;
              console.log(peopList);
              that.usersLists = peopList;
              var users = []; //审核通过
              var puser = []; //审核通过
              var npuser = []; //审核通过
              for (var i = 0; i < peopList.length; i++) {
                if (peopList[i].admin_id == null) {
                  //获奖
                  peopList[i].examine = "未审核";
                  peopList[i].color = "color:#e6a23c";
                  peopList[i].create_time = that
                    .$moment(peopList[i].create_time)
                    .format("YYYY-MM-DD");
                  puser.push(peopList[i]);
                } else {
                  //获奖
                  peopList[i].examine = "已审核";
                  peopList[i].color = "color:#67c23a";
                  peopList[i].create_time = that
                    .$moment(peopList[i].create_time)
                    .format("YYYY-MM-DD");
                  npuser.push(peopList[i]);
                }
                //性别
                 if (peopList[i].user_sex == null) {
                  peopList[i].user_sex = "保密";
                  
                } else if (peopList[i].user_sex == 0){
                  peopList[i].user_sex = "男";
                }else if (peopList[i].user_sex == 1){
                  peopList[i].user_sex = "女";
                }
                //类型
                 if (peopList[i].user_type == null) {
                  peopList[i].user_type = "错误";
                  
                } else if (peopList[i].user_type == 0){
                  peopList[i].user_type = "游客";
                }else if (peopList[i].user_type == 1){
                  peopList[i].user_type = "教师";
                }
              }
              that.pusersLists = puser;
              that.npusersLists = npuser;
            }
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    },

    //审核是否通过用户
    pass(id) {
      var that = this;
      var parse = {
        admin_id: that.user.admin_id,
        user_id: id
      };
      that.$axios
        .post("apis/admin/auditregistered", this.$qs.stringify(parse))
        .then(function(res) {
          if (res.status == 200) {
            if (res.data.status == 1) {
              that.getUsers();
              that.$message({
                message: "用户注册审核成功~",
                type: "success"
              });
            }
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    //切换
    change(val) {
      console.log(val);
      if (val == 0) {
        this.usersLists = this.npusersLists;
      } else if (val == 1) {
        this.usersLists = this.pusersLists;
      }
    },
    //删除用户
    delUser(id){
      var that = this;
      var parse = {
        user_id: id
      };
      that.$axios
        .post("apis/admin/deluser", this.$qs.stringify(parse))
        .then(function(res) {
          if (res.status == 200) {
            if (res.data.status == 1) {
              that.getUsers();
              that.$message({
                message: "用户删除成功~",
                type: "success"
              });
            }
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    }
  }
};
</script>

<style lang="less" scoped>
.menuList {
  height: 810px;
  .el-card {
    width: 100% !important;
  }
  .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both;
  }

  .box-card {
    width: 480px;
  }
  .evamine {
    width: 90%;
    margin: 0 auto;
    p {
      text-align: left;
      line-height: 40px;
      video {
        width: 100%;
      }
    }
    div {
      width: 40%;
      margin: 20px auto;
      display: flex;
      justify-content: space-between;
    }
  }
}
</style>
